<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>群聊页面</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <!-- 样式初始化 自定义文件 -->
    <link rel="stylesheet" href="../css/index.css">
    <!-- 下面所有都是库文件 -->
    <link rel="stylesheet" href="../newtp/lib/weui.min.css">
    <link rel="stylesheet" href="../newtp/css/jquery-weui.css">
    <link rel="stylesheet" href="../newtp/css/theme.css">
    <script src="../newtp/lib/jquery-2.1.4.js"></script>
    <script src="../newtp/lib/fastclick.js"></script>
    <script src="../newtp/js/jquery-weui.js"></script>
<style>
/*外容器*/
.page-container{ position: relative; width: 100%; height: 100%; overflow:hidden; }
/*容器顶部*/
.page-top{position: absolute; top:0; left: 0;width:100%;z-index: 99 ;border-bottom: 1px solid #e6e9f3; background: #fff;}
.page-title{ position: relative;  width: 100%; height: 55px;font-size: 15px; text-align: center;  }
.page-title .info{  width:100%; height: 55px;  padding:5px 0;   }
.page-title a{ position: absolute; }
.page-title .name{ display: block;   }
.page-title .banji{ display: block; color: #c8c8c8; font-size: 12px }
.page-title .r-back{top:0;left:18px; width:20px; height: 100%; background:url(../img/g_03.png) center no-repeat; background-size: 18px; }
.page-title .r-info{top:0;right:10px; width:21px; height: 100%; background:url(../img/dr_03.png) center no-repeat; background-size: 21px; }
/*容器内容*/
.page-cont { padding:55px 0 50px 0;height: 100%; overflow: hidden; overflow-y: auto; background: #f3f4f9; }
/*公共*/
.p-time{ height:25px; width: 100%; line-height: 25px; text-align: center; font-size: 10px; color: #929292; }
.p-img{  height: 45px;width: 45px; border-radius: 50%;  }
.p-title{  height: 20px; line-height:20px; width: 275px; }
.p-text{  padding:13px; min-height: 45px;max-width: 250px; border-radius: 5px; word-wrap:break-word;font-size: 15px; }
/*他人*/
.other-info,.me-info{padding:13px; overflow: hidden;   }
.other-info .p-img{float: left;margin-right:5px;  }
.p-title{ height: 20px; }
.p-title span{float: left; }
.other-info .name{ padding-right: 5px; line-height: 15px;  text-align: center; color: #a1a1a1; font-size: 15px;   }
.other-info .zhiye{ display: inline-block;line-height: 13px; padding:1px 3px;  font-size: 9px; border-radius: 3px; background: #36adfd;color: #fff; vertical-align: middle; letter-spacing:3px;  }
.other-info .p-text{margin-top: 5px; float: left;border:1px solid #dddddd; background: #fff;color: #202020; }
/*自己*/
.me-info .p-img{ float:right; margin:0; }
.me-info .p-text{ float:right;margin-right: 5px; background: #bad7fc;color: #202020; }
/*底部*/
  .botm{ position: absolute; bottom: 0;left: 0; height: 50px ; width: 100%; line-height: 50px; background: #fff; vertical-align: middle; }
  .botm a{ display: inline-block;vertical-align: middle; }
  .botm-icon-add{margin-left: 10px;  width: 26px; height: 26px; background:url(../img/add_03.png) no-repeat; background-size: 26px; }
  .botm-icon-face{margin-left: 5px;   width: 26px; height: 26px; background:url(../img/face_05.png) no-repeat; background-size: 26px;  }

  .botm-btn{  width: 50px; height: 27px;line-height: 27px; border-radius: 3px;
                     background: #0082e2 linear-gradient(to right,#00b5ee,#0082e2); text-align: center; color: #fff; font-size: 15px; }

  .botm-input{vertical-align: middle; margin:0 5px; width:50%; height:27px;border-radius: 2px; font-size: 14px; border:1px solid #f2f2f2; }
/*辅助类*/
.color1{ color: #2bb1ff; }
.color2{ color: #c8c8c8; }
</style>
</head>
<body>
<div class="page-container">
      <div class="page-top">
              <div class="page-title">
                      <a class="r-back" href="javascript:history.back(-1);"></a>
                      <div class="info">
                            <span class="name">班级交流群</span>
                            <span class="banji">高中部一年级一班</span>
                      </div>
                      <a class="r-info" href="qunliaoxiang.html"></a>           
              </div>  
      </div>

      <div class="page-cont" >
           <div id="con-wrap">
                 <p class="p-time clear">2018/8/15 10:22</p>
                 <div class="other-info">
                        <img  class="p-img"  src="../img/t5.png" alt="个人图像">
                        <div class="p-title left">
                              <span class="name">张萌萌</span>
                              <span class="zhiye">学生</span>
                        </div>
                        <p class="p-text">今天下午开其中考今天下午开其中考今天下午开其中考今天下午开其中考今天下午开其中考</p>
                 </div>
                  <p class="p-time clear">2018/8/15 10:22</p>
                  <div class="me-info">
                        <img  class="p-img"  src="../img/t5.png" alt="个人图像">
                        <p class="p-text">今天下午开其中考今天下午</p>
                  </div>
            </div>
      </div>

      <div class="botm">
              <a class="botm-icon-add" ></a>
              <a class="botm-icon-face" ></a>
              <input class="botm-input" type="text" id="p-input" >
              <a class="botm-btn" id="p-send">发送</a>
      </div>
</div>
</body>
<script>
(function(){
// 信息数据
// 信息数据
var arr = [
     { name:"张萌萌", zhiye:"学生", text:"对呀! 对呀! ", src:"../img/t5.png"},
     { name:"张小龙", zhiye:"学生", text:"好啊! 好啊! ", src:"../img/t1.png"},
     { name:"王美美", zhiye:"学生", text:"呵呵! ", src:"../img/t5.png"},
     { name:"张老师", zhiye:"老师", text:"聊什么啊,这么开心? ", src:"../img/t1.png"}
]

function info(x){
     return  '<div class="other-info">'+
                        '<img  class="p-img"  src="'+x.src+'" alt="个人图像">'+
                        '<div class="p-title left">'+
                              '<span class="name">'+x.name+'</span>'+
                              '<span class="zhiye">'+x.zhiye+'</span>'+
                        '</div>'+
                        '<p class="p-text">'+x.text+'</p>'+
                 '</div>';
}

var n=0;
var time=null;
var obj = { Jan:1,Feb:2,Mar:3,Apr:4,May:5,Jun:6,Jul:7,Aug:8,Sep:9,Oct:10,Nov:11,Dec:12 };
$("#p-send").click(function(){
      var val=$("#p-input").val();
      if(val == ''){ return; }
      var nowtime = new Date().getTime();
      var now = new Date();
      var timearr = now.toString().split(" ");
      var timestr = timearr[3]+'/'+obj[timearr[1]]+'/'+timearr[2]+" "+timearr[4];
        // 大于1分钟时,会显示时间
       if(  Number(nowtime) - Number(time) >60000 ){
            var str='<p class="p-time clear">'+ timestr +'</p>'+
                        '<div class="me-info">'+
                            '<img  class="p-img"  src="../img/t5.png" alt="个人图像">'+
                            '<p class="p-text">'+ val +'</p>'+
                       '</div>';
       }else{
            var str= '<div class="me-info">'+
                            '<img  class="p-img"  src="../img/t5.png" alt="个人图像">'+
                            '<p class="p-text">'+ val +'</p>'+
                       '</div>';
       }
      str =   $("#con-wrap").html( ) + str;      
      $("#con-wrap").html( str);

       setTimeout(function(){
                 $("#con-wrap").html( str + info(arr[n]) );
                 scrHeight();
                 n++; if(n>arr.length-1){ n=0 };
            },500)

      $("#p-input").val('');
      time = nowtime;
      scrHeight();
      $("#p-input")[0].focus();
      return false;
})

// 发送信息时信息框自动向上滚动 封装函数
function scrHeight(){
      // 获取信息框高度
      var h1 = $(".page-container").height()-220;      //iphone 6/7/8   1114
      var h2 = $("#con-wrap").height();
      // 设置滚动距离
      if( h2>h1){
        $(".page-cont").scrollTop(  h2-h1 );   
      }
}  
})()
</script>
</html>